<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GIS</title>
	<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="./css/production.css">
    <link rel="stylesheet" href="./css/htmleaf-demo.css">
    <link rel="stylesheet" href="./css/nav.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=PlhFWpA02aoURjAOpnWcRGqw7AI8EEyO"></script>
	<script src="./js/jquery.min.js"></script>
</head>

<body>
	<div class="htmleaf-container">
		<div class="demo">
			<h4>渔业管理系统</h4>
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <nav class="navbar navbar-default navbar-mobile bootsnav">
                            <div class="collapse " id="navbar-menu">
                                <ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">
                                    <li><a href="./index.html">GIS控制台</a></li>
                                    <li class="ifra"><a href="./myplan.html" target="_mainJ">计划任务管理</a></li>
                                    <li class="ifra"><a href="./production.html" target="_mainS">生产主体库</a></li>
                                    <li class="ifra"><a href="./naming.html" target="_mainM">命名管理</a></li>
                                    <li class="ifra"><a href="./information.html" target="_main">基础信息管理</a></li>
                                    <li class="ifra"><a href="./management .html" target="_mainX">系统管理</a></li>
                                </ul>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>			
			<div class="username">
				<img src="./img/background.png" alt="">
				<div>
					<p class="username-call">区级信息员</p>
                    <div  class="dropdown " >
                        <a  href="#" class="dropdown-toggle glyphicon glyphicon-chevron-down " data-toggle="dropdown">                 
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#" class="person">个人信息</a></li>
                            <li><a href="#" class="changeshow">修改头像</a></li>
                            <li><a href="#" class="forgetpass monik">修改密码</a></li>
                            <li class="divider"></li>
                            <li><a href="#">切换到种植系统</a></li>
                            <li class="divider"></li>
                            <li><a href="#">退出</a></li>
                            <li class="divider"></li>
                            <li><a href="#">清除系统缓存</a></li>
                        </ul>
                    </div>
				</div>

			</div>
		</div>

	</div>
    <div class="nan-content"> 
        <div id="left-nav">
		<ul class="left-nav-top">
			<li>采集中</li>
			<li>已到期</li>
			<li>数据查看</li>
		</ul>
		<div class="longs"></div>
		<div>
			<div class="left-content">
				<ul class="row">
				</ul>
			</div>
			<div class="left-content">
				<ul class="row content"></ul>
			</div>
			<div class="left-content">
				<article class="bingtu col-md-10 form-control">
					<ul data-pie-id="pie" class="">
						<li data-value="60" class="text-primary">鱼塘总数量: <span>28525</span>块 </li>
					</ul>
					<p>各二类地级数量</p>
					<div id="pie"></div>
				</article>
				<article class="bingtu col-md-10 form-control">
					<ul data-pie-id="pie2">
						<li data-value="60" class="text-primary">鱼塘总面积：<span>151857.886</span>亩</li>
					</ul>
					<p>各二类地级数量</p>
					<div id="pie2"></div>
				</article>
				<article class="bingtu col-md-10 form-control">
					<ul data-pie-id="pie3">
						<li data-value="6654" class="text-primary">个体户<span>6654</span></li>
						<li data-value="100" class="text-warning">企业<span>32</span></li>
						<li data-value="486" class="text-success">合作社<span>486</span></li>
					</ul>
					<p>主要类型分布</p>
					<div id="pie3"></div>
				</article>
				<article class="bingtu col-md-10 form-control">
					<ul data-pie-id="pie4">
						<li data-value="60" class="text-primary">鱼塘总产值：<span>315,271.338</span>万</li>
					</ul>
					<p>各二类地级数量</p>
					<div id="pie4"></div>
				</article>
			</div>
		</div>

	</div>
    <div class="address">
        <div class="address-top">
            <button class="btn btn-primary"> 区镇级管理员/创建任务计划 ></button>
            <button class="btn btn-primary"><a href="#" class="glyphicon glyphicon-tint"></a> 任务执行/数据标注/村居采集，镇/街区支持录入 ></button>
            <button class="btn btn-primary"><a href="#" class="glyphicon glyphicon-tint"></a> 任务数据查看/审核/镇街审核/区支持审核</button>
        </div>
        <div id="container"></div>
       
    </div>
    </div>

    <iframe src="" frameborder="0" name="_mainJ" style="width: 100%;height: calc(100vh - 60px);overflow: hidden;"></iframe>
    <iframe src="" frameborder="0" name="_mainS" style="width: 100%;height: calc(100vh - 60px);overflow: hidden;"></iframe>
    <iframe src="" frameborder="0" name="_mainM" style="width: 100%;height: calc(100vh - 60px);overflow: hidden;"></iframe>
    <iframe src="" frameborder="0" name="_main" style="width: 100%;height: calc(100vh - 60px);overflow: hidden;"></iframe>
    <iframe src="" frameborder="0" name="_mainX" style="width: 100%;height: calc(100vh - 60px);overflow: hidden;"></iframe>
    
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog"></div>
    </div>

	<script src="./js/indexajax.js"></script>
</body>

</html>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="./js/bootsnav.js"></script>
<script src="./js/index.js"></script>
<script src="dist/js/vendor/dependencies.js"></script>
<script src="dist/js/pizza.js"></script>
<script src="./js/modal-box.js"></script>
<script>
    var map = new BMapGL.Map('container'); // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(120.219375416,30.2592444615), 12); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
    //moveX('#myModal')
	let father = document.querySelector('#myModal')
    father.addEventListener('mousedown', function (e) {
        let x = e.pageX - this.offsetLeft
        let y = e.pageY - this.offsetTop
       document.onmousemove = function(e){
		   father.style.left = e.clientX - x + 'px';
		   father.style.top = e.clientY - y + 'px'
	   }
	   document.onmouseup= function(){
		   document.onmousemove=document.onmouseup=''
	   }
    })
</script>
<script>
	$(function () {
		$('iframe').hide()
		$('.ifra').each(function(index){
			$(this).on('click',function(){
				$('iframe').hide()
			    $('iframe').eq(index).show()
				$('.nan-content').hide()
			})	
		})

     $('.navbar-nav li').eq(0).css({'background':'#006BCC'})
		$('.navbar-nav').on('click','li',function(){
			$(this).css({'background':'#006BCC'}).siblings().css({'background':''})
		})
		function xxk() {
			$('.left-content').eq(0).show().siblings().hide()
			$('.left-nav-top li').each(function (index) {
				$(this).on('click', function () {
					let n = $('.left-nav-top').width() / ($(this).parent.length + 1)
					$('.left-content').eq(index).show().siblings().hide()
					$('.longs').stop().animate({ left: n * index }, 500)
				})
			})
		}
		xxk()
		function queren() {
			document.onmousemove = function () {
				$('.left-content .btn-success').on('click', function () {
					$('.left-content .btn-success').css({ 'background': '', 'border': ' ' }).html('当前')
                    $('.xiqiao').css({"color":"black"})
					$(this).css({ 'background': 'gold', 'border': '1px gold solid' }).html('选择').siblings('.xiqiao').css({"color":"red"})                  
				})
			}
		}
		queren()		
		$(window).load(function () {
			Pizza.init();
			$(document).foundation();
		});
		person('.person','.changeshow','.monik')
	})
</script>